<template>
  <div>
    <!-- 新增电影表单 -->
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" style="width: 700px;">
      <el-form-item label="封面图片" prop="cover">
        <el-upload
          class="avatar-uploader"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.cover" :src="form.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="电影类别" prop="categoryId">
        <el-radio-group v-model="form.categoryId">
          <el-radio label="1">热映</el-radio>
          <el-radio label="2">待映</el-radio>
          <el-radio label="3">经典</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电影名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入电影名称"></el-input>
      </el-form-item>
      <el-form-item label="电影类型" prop="type">
        <el-select v-model="form.type" multiple placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in types"
            :key="item.id"
            :label="item.typename"
            :value="item.typename">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电影主演" prop="starActor">
        <el-select
          v-model="form.starActor"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
          style="width:100%">
          <el-option
            v-for="item in actors"
            :key="item.id"
            :label="item.actor_name"
            :value="item.actor_name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上映时间" prop="showingon">
        <el-date-picker
          v-model="form.showingon"
          type="date"
          style="width: 100%;"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="电影评分" prop="score">
        <el-input v-model="form.score" placeholder="(10分为满分)"></el-input>
      </el-form-item>
      <el-form-item label="电影时长" prop="duration">
        <el-input v-model.number="form.duration" placeholder="请输入分钟数,例:156"></el-input>
      </el-form-item>
      <el-form-item label="电影简介" prop="description">
        <div style="border: 1px solid #ccc;">
          <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              style="height: 300px; overflow-y: hidden;"
              v-model="html"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
          />
        </div>
      </el-form-item>
      <el-form-item label="" prop="">
        <el-button type="primary" @click="submit">立即创建</el-button>
        <el-button @click="$refs.form.resetFields()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from '@/http'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

  export default {
    components: { Editor, Toolbar }, 
    data() {
      return {
        // 富文本模块
        editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { 
              placeholder: '请输入内容...',
              MENU_CONF: {
                uploadImage : {
                  fieldName: 'file',   // 上传参数所使用的的字段名
                  server: this.UPLOADURL + '/upload',  // 上传目标路径
                  customInsert(res, insertFn){
                    // 当上传成功后, 自动调用, 传入响应对象 res
                    let url = res.data  // 上传成功的图片 的访问地址
                    insertFn(url) // 自动把上传成功的图片, 显示在编辑器中
                  }
                }
              }
            },
            mode: 'simple', // or 'default'

            // 
            loading:false,
            actors:[],
            types:[],
            form:{
              cover: '', categoryId: '1', title: '', type: '', starActor: '', showingon: '', score: '', description: '', duration: ''
            },
            rules:{
              cover: {required:true, message:'必填', trigger:'blur'},
              categoryId: {required:true, message:'必填', trigger:'blur'},
              title: {required:true, message:'必填', trigger:'blur'},
              type: {required:true, message:'必填', trigger:'blur'},
              starActor: {required:true, message:'必填', trigger:'blur'},
              showingon: {required:true, message:'必填', trigger:'blur'},
              score: {required:true, message:'必填', trigger:'blur'},
              description: {required:true, message:'必填', trigger:'blur'},
              duration: {required:true,type:'number', message:'必填', trigger:'blur'},
            },
            timeout:null
      }
    },
    methods: {
      /** 当组件创建时, 初始化富文本编辑器 */
      onCreated(editor) {
          // 配置上传文件相关参数
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },

      // 电影主演
      remoteMethod(keyword){
        if(this.timeout != null){
          clearTimeout(this.timeout)
        }
        this.timeout = setTimeout(() => {
          if(keyword !== ''){
            this.loading = true
            let params = {name:keyword}
            httpApi.actorApi.queryActorsByName(params).then(res=>{
              this.loading = false
              this.actors = res.data.data
            })
          }
          this.timeout = null
        }, 2000);

      },

      // 提交
      submit(){
        // 表单验证
        this.$refs.form.validate(valid=>{
          // 处理某些字段, 使之可以提交给服务器
          this.form.description = this.editor.getHtml()
          // console.log(this.editor.getHtml(),'form',this.form)
          if(valid){
            // 处理某些字段, 使之可以提交给服务器
            this.form.type = this.form.type.join('／')
            this.form.starActor = this.form.starActor.join('／')
            // console.log('form',this.form)
            httpApi.movieApi.add(this.form).then(res=>{
              this.$message.success('新增电影成功')
              // 跳转列表页面
              this.$router.push('/home/movie-list')
            }).catch(err=>{
              this.$message.info('添加失败,请稍后重试'+ err)
            })
          }else{
            this.$message.info('请检查格式后再提交哦')
          }
        })
      },

      // 初始化电影类型
      initMovieTypes(){
        httpApi.movieApi.queryTypes().then(res=>{
          this.types = res.data.data
        })
      },

      // 上传模块
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    mounted () {
      // 初始化所有电影类型
      this.initMovieTypes()

      // 模拟 ajax 请求，异步渲染编辑器
      setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy () {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    },
  }
</script>

<style lang="scss" scoped>

</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>